<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head dispfx flxhc flxvc">
        <embed src="./image/返回.svg" type="">
        <p>商品详情</p>
    </div>
    <!-- 2  轮播图  -->
    <section>

        <div class="lb">
            <div class="lunbo">
                <ul class="dispfx">
                    <li><img src="./image/组 16.png" alt=""></li>
                    <li><img src="./image/组 16.png" alt=""></li>
                    <li><img src="./image/组 16.png" alt=""></li>
                    <li><img src="./image/组 16.png" alt=""></li>
                </ul>
            </div>
            <div class="dian">
                <ul class="yuan dispfx flx-hc">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!-- 灯罩效果 -->
        <div class="light" style="display: none;">

        </div>
    </section>
    <!-- 3 -->
    <div class="three">
        <div class="three-1 dispfx">
            <img src="./image/组 3.png" alt="">
            莫次有机PWE活性美白洗面奶
        </div>
        <div class="three-2 dispfx flxvc flxspb">
            <p>
                <span class="three-2-1">￥169</span>
                <span class="three-2-2">￥220</span>
            </p>
            <p class="three-2-3"> 买够200元包邮</p>
        </div>
    </div>
    <!-- 4 -->
    <div class="four dispfx flxspb flxvc">
        <p class="four-1">规格</p>
        <p class="four-2 dispfx flxvc">
            标准<img src="./image/Path.png" alt="">
        </p>
    </div>
    <!-- 5 -->
    <div class="two">
        <ul class="two-ul dispfx flxspb">
            <li class="two-you" style="color: #2DA3E8;">详情</li>
            <li class="two-you">评价</li>
            <li class="jia">售后</li>
        </ul>
    </div>
    <!-- 6 -->
    <div class="six">
        <img src="./image/详情.png" alt="">
    </div>

    <!-- 购物 -->
    <div class="gou" style="display: none;">
        <div class="gou-1 dispfx">
            <img src="./image/叉.svg" alt="" class="gb">
            <img src="./image/组 32.png" alt="">
            <div class="gou-1-p">
                <p>莫次有机PWE活性美白洗面奶</p>
                <p>￥169</p>
            </div>
        </div>
        <!-- 商品类型 -->
        <div class="gou-2 dispfx flxspb flxvc">
            <p>商品规格</p>
            <div>
                <span>标准</span>
                <span>套餐</span>
            </div>
        </div>
        <!-- 商品数量 -->
        <div class="gou-3 dispfx flxspb flxvc">
            <p>购买数量</p>
            <div class="gou-3-1 dispfx">
                <div class="gou-3-jia">+</div>
                <div style="width: 0.8rem;" class="sl">2</div>
                <div class="gou-3-jian">-</div>
            </div>
        </div>
        <!-- 商品颜色 -->
        <div class="gou-4 dispfx flxspb flxvc">
            <p>商品颜色</p>
            <ul class="gou-4-ul dispfx">
                <li style="background: #8EE6F9; border: 0.03px solid #262829;"></li>
                <li style=" background: #FCD59C;"></li>
                <li style="background: #F9ADB4;"></li>
                <li style="background: #C8AEF9;"></li>
            </ul>
        </div>

        <div class="ok">
            确定
        </div>
    </div>



    <!-- 底部 -->
    <div class="dibu dispfx">
        <div class="dibu-1 dispfx flxvc flxar">
            <ul class="dibu-1-ul dispfx">
                <li class="dibu-li">
                    <img src="./image/客服.png" alt="" style="width: 0.48rem; margin-bottom: .1067rem;">
                    <p>客服</p>
                </li>
                <li>
                    <img src="./image/收藏.png" alt="" style="width: 0.49rem;  height: 0.47rem; margin-bottom: .1067rem;">
                    <p>收藏</p>
                </li>
            </ul>
        </div>
        <div class="dibu-2">
            <ul class="dibu-2-ul dispfx">
                <li class="dibu-2-ul-1">加入购物车</li>
                <li class="dibu-2-ul-2">立即购买</li>
            </ul>
        </div>
    </div>
    <!-- 购物车 -->
    <div class="shopping">
        <img src="./image/组 17.png" alt="">
        <span>2</span>
    </div>
</body>
<!-- 轮播图 -->
<script>
    var bs = BetterScroll.createBScroll(".lunbo", {
        // ① 开启横向滚动，禁止纵向滚动
        scrollX: true,
        scrollY: false,
        // ② 保留轮播图上，纵向的原生滚动
        eventPassthrough: true,
        // ③ 开启轮播
        slide: {
            loop: true,
            threshold: 0.1,
            speed: 400,
            listenFlick: true,
            autoplay: true,
            interval: 3000
        },
        // 设置为false,解决轮播快速切换时的闪烁问题
        momentum: false,
        // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
        bounce: false
    });
    bs.on('scrollEnd', () => {
        var lis = document.querySelectorAll('.dian li');
        var page = bs.getCurrentPage().pageX;
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[page].className = 'on';
    });
</script>
<!-- 弹窗 -->
<script>
    // 显示
    // 加入购物车
    $('.dibu-2-ul-1').click(function () {
        $('.gou').css('display', 'block')
        $('.light').css('display', 'block')
    })
    // 立即购买
    $('.dibu-2-ul-2').click(function () {
        $('.gou').css('display', 'block')
        $('.light').css('display', 'block')
    })
    // 隐藏
    $('.gb').click(function () {
        $('.gou').css('display', 'none')
        $('.light').css('display', 'none')
    })
    // 商品类型
    var spn = document.querySelectorAll('.gou-2 span')
    for (var i = 0; i < spn.length; i++) {
        spn[i].addEventListener('click', function () {
            for (var j = 0; j < spn.length; j++) {
                spn[j].style.background = 'rgba(226, 87, 76, 0)'
                spn[j].style.border = '0.01px solid #DDDDDD'
            }
            this.style.background = 'rgba(186, 224, 243, 0.3)'
            this.style.border = '0.01px solid #92C7E2'

        })
    }
    // 商品数量
    var sll = 2
    $('.sl').text(sll)
    // 加
    $('.gou-3-jia').click(function () {
        sll++
        $('.sl').text(sll)
    })
    // 减
    $('.gou-3-jian').click(function () {
        sll--
        if (sll < 1) {
            return
        }
        $('.sl').text(sll)
    })
    // 选择颜色
    var lil = document.querySelectorAll('.gou-4-ul li')
    for (var i = 0; i < lil.length; i++) {
        lil[i].addEventListener('click', function () {
            for (var j = 0; j < lil.length; j++) {
                lil[j].style.border = 'none'
            }
            this.style.border = '0.03px solid #262829'
        })
    }
</script>

</html>